<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="mx-[30rpx]"> <u-search disabled bgColor="#fff" :showAction="false" placeholder="搜索班级"
                v-model="course"></u-search></view>

        <view class="bg-[#fff] mt-[10rpx]  px-[40rpx] pt-[30rpx]">
            <view class="mt-[20rpx]" v-for="(item, index) in data" :key="index">
                <view @click="oneChange(index)" class="flex items-center text-[38rpx] mt-1">
                    <u-icon :name="oneCurrent == index ? 'arrow-down-fill' : 'play-right-fill'" color="#272636"
                        size="20"></u-icon>
                    <text class="ml-[20rpx]">{{ item.title }}</text>
                </view>
                <view v-show="oneCurrent == index" v-for="(items, indexs) in item.children" :key="indexs" class="ml-[40rpx]">
                    <view  @click="twoChange(indexs)" class="flex items-center text-[38rpx] mt-1">
                        <u-icon :name="twoCurrent == indexs ? 'arrow-down-fill' : 'play-right-fill'" color="#272636"
                            size="20"></u-icon><text class="ml-[20rpx]">{{ items.title }}</text>
                    </view>
                    <view v-show="twoCurrent == indexs" class="ml-[40rpx]">
                        <u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
                         
                                    <u-radio :customStyle="{ marginBottom: '8px' }"
                                    v-for="(itemss, indexss) in items.children" :key="indexss"
                                         :label="itemss.title"
                                        :name="itemss.title">
                                    </u-radio>
                           
                        </u-radio-group>
                    </view>
                </view>
            </view>
        </view>
        <view class=" text-white mt-[36rpx] relative translate-x-[-50%] left-[50%] py-[10rpx] px-4 bg-[#FD755D] rounded flex w-[200rpx] items-center justify-center  text-[32rpx]">申请加入</view>
    </view>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
const course = ref("")
const oneCurrent = ref(9999)
const twoCurrent = ref(9999)

const data = ref([{
    title: "一级学院",
    children: [
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        },
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        }

    ]
}, {
    title: "一级学院",
    children: [
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        },
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        }

    ]
}, {
    title: "一级学院",
    children: [
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        },
        {
            title: "二级学院",
            children: [
                {
                    title: "2024班级1"
                },
                {
                    title: "2024班级2"
                }
            ]
        }

    ]
}
])
const oneChange = (index) => {
    if (oneCurrent.value == index) {
        oneCurrent.value = 9999
        twoCurrent.value = 9999
    } else {
        oneCurrent.value = index
    }

}
const twoChange = (index) => {
    if (twoCurrent.value == index) {
        twoCurrent.value = 9999
    } else {
        twoCurrent.value = index
    }
}
</script>
<style scoped></style>